<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f0f0f0;
        }

        p {
            font-weight: 300;
        }

        a, a:hover {
            text-decoration: none !important;
            color: #626976;
        }

        .content {
            padding: 3rem 0;
        }

        .container {
            color: #626976;
            position: relative;
        }

        h2 {
            font-size: 20px;
        }

        h3 {
            font-size: 16px;
        }
    </style>
    <title>Banner Details</title>
    <script src="/gacha/mappings" type="text/javascript"></script>
</head>
<body>
<div class="content">
    <div class="container">
        <h2 class="mb-5">{{TITLE}}</h2>

        <h3 class="">{{AVAILABLE_FIVE_STARS}}</h3>
        <hr/>
        <ul id="5-star-list">
        </ul>

        <h3 class="">{{AVAILABLE_FOUR_STARS}}</h3>
        <hr/>
        <ul id="4-star-list">
        </ul>

        <h3 class="">{{AVAILABLE_THREE_STARS}}</h3>
        <hr/>
        <ul id="3-star-list">
        </ul>
    </div>
</div>
<footer>
    <div class="copyright">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                            <span>
                                Template by BecodReyes. All rights reserved.
                            </span>
                </div>
                <div class="col-md-6">
                    <ul style="float:right">
                        <li class="list-inline-item">
                            <a href="https://github.com/Grasscutters/Grasscutter">Github</a>
                        </li>
                        <li class="list-inline-item">·</li>
                        <li class="list-inline-item">
                            <a href="https://github.com/Grasscutters/Grasscutter/blob/stable/LICENSE">License</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</footer>

<script>
    var fiveStarItems = {
    {
        FIVE_STARS
    }
    }

    var fourStarItems = {
    {
        FOUR_STARS
    }
    }

    var threeStarItems = {
    {
        THREE_STARS
    }
    }

    var lang = "{{LANGUAGE}}".toLowerCase();

    function getNameForId(itemId) {
        if (mappings[lang] != null && mappings[lang][itemId] != null) {
            return mappings[lang][itemId][0];
        } else if (mappings["en-us"] != null && mappings["en-us"][itemId] != null) {
            return mappings["en-us"][itemId][0];
        }

        return itemId.toString();
    }

    fiveStarList = document.getElementById("5-star-list");
    fourStarList = document.getElementById("4-star-list");
    threeStarList = document.getElementById("3-star-list");

    fiveStarItems.forEach(element => {
        var entry = document.createElement("li");
        entry.innerHTML = getNameForId(element);
        fiveStarList.appendChild(entry);
    });
    fourStarItems.forEach(element => {
        var entry = document.createElement("li");
        entry.innerHTML = getNameForId(element);
        fourStarList.appendChild(entry);
    });
    threeStarItems.forEach(element => {
        var entry = document.createElement("li");
        entry.innerHTML = getNameForId(element);
        threeStarList.appendChild(entry);
    });
</script>
</body>
</html>
